<template>
  <div class="form-flow-basic-fragment">
    <el-form ref="entryBasicInfo" size="small" :model="formFlowEntryData" :rules="formRules" label-position="right" label-width="120px" @submit.native.prevent>
      <el-col :span="10">
        <el-form-item label="流程缩略图" prop="thumbIcon">
          <div class="block" style="align-items: center;">
            <!--  <el-avatar class="avatar-info" shape="square" size="small" fit="scale-down" :icon="formFlowEntryData.thumbIcon" @click.native="selectIconDialog" /> -->
            <icon-select v-model="formFlowEntryData.thumbIcon" :height="35" />
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <el-form-item label="表单类型" prop="bindFormType">
          <el-select v-model="formFlowEntryData.bindFormType" placeholder="" :disabled="isEdit" @change="onBindFormTypeChange">
            <el-option :label="SysFlowEntryBindFormType.getValue(SysFlowEntryBindFormType.ROUTER_FORM)" :value="SysFlowEntryBindFormType.ROUTER_FORM" />
            <el-option :label="SysFlowEntryBindFormType.getValue(SysFlowEntryBindFormType.ONLINE_FORM)" :value="SysFlowEntryBindFormType.ONLINE_FORM" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="流程名称" prop="processDefinitionName">
          <el-input v-model="formFlowEntryData.processDefinitionName" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="流程标识" prop="processDefinitionKey">
          <el-input v-model="formFlowEntryData.processDefinitionKey" :disabled="isEdit" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="流程分类" prop="categoryId">
          <el-select v-model="formFlowEntryData.categoryId" placeholder="" :loading="categoryIdWidget.loading" @visible-change="categoryIdWidget.onVisibleChange">
            <el-option v-for="item in categoryIdWidget.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="formFlowEntryData.bindFormType === SysFlowEntryBindFormType.ONLINE_FORM" :span="24">
        <el-form-item label="流程页面" prop="pageId">
          <el-select v-model="formFlowEntryData.pageId" :disabled="isEdit" placeholder="" :loading="pageIdWidget.loading" @visible-change="pageIdWidget.onVisibleChange" @change="onEntryPageChange">
            <el-option v-for="item in pageIdWidget.dropdownList" :key="item.pageId" :value="item.pageId" :label="item.pageName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="formFlowEntryData.bindFormType === SysFlowEntryBindFormType.ONLINE_FORM" :span="24">
        <el-form-item label="默认在线表单" prop="defaultFormId">
          <el-select v-model="formFlowEntryData.defaultFormId" placeholder="" :loading="defaultFormIdWidget.loading" @visible-change="defaultFormIdWidget.onVisibleChange">
            <el-option v-for="item in defaultFormIdWidget.dropdownList" :key="item.formId" :value="item.formId" :label="item.formName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="formFlowEntryData.bindFormType === SysFlowEntryBindFormType.ROUTER_FORM" :span="24">
        <el-form-item label="默认路由表单" prop="defaultRouterName">
          <el-input v-model="formFlowEntryData.defaultRouterName" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="流程描述" prop="description">
          <el-input v-model="formFlowEntryData.description" type="textarea" rows="3" />
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer btnList">
      <el-button type="primary" size="small" :plain="true" @click="onCancel(false)">取消</el-button>
      <el-button type="primary" size="small" @click="onSaveFlowEntryBasicInfo()">保存</el-button>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import '@/staticDict/flowStaticDict.js'
/* eslint-disable-next-line */
import rules from '@/utils/validate.js'
/* eslint-disable-next-line */
import { DropdownWidget } from '@/utils/widget.js'
/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin, cachePageMixin } from '@/core/mixins'
import IconSelect from '@/components/IconSelect/index.vue'
/* eslint-disable-next-line */
import { FlowEntryController, FlowEntryVariableController, FlowDictionaryController } from '@/api/flowController.js'
import {
  OnlinePageController,
  OnlineFormController
} from '@/api/onlineController.js'

export default {
  name: 'FormEditFlowBasic',
  components: {
    IconSelect
  },
  mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
  props: {
    flowEntry: {
      type: Object,
      default: () => {}
    }
  },
  provide() {
    return {
      flowEntry: () => this.formFlowEntryData,
      formList: () => this.defaultFormIdWidget ? this.defaultFormIdWidget.dropdownList : [],
      allVariableList: () => this.processVariableList
    }
  },
  data() {
    return {
      entryDatasource: undefined,
      formFlowEntryData: {
        entryId: undefined,
        processDefinitionName: undefined,
        processDefinitionKey: undefined,
        categoryId: undefined,
        bindFormType: this.SysFlowEntryBindFormType.ROUTER_FORM,
        pageId: undefined,
        defaultFormId: undefined,
        defaultRouterName: undefined,
        thumbIcon: 'el-icon-cpu',
        bpmnXml: undefined,
        description: undefined
      },
      documentClientHeight: this.$store.getters.clientHeight,
      categoryIdWidget: new DropdownWidget(this.loadCategoryIdDropdownList),
      pageIdWidget: new DropdownWidget(this.loadPageIdDropdownList),
      defaultFormIdWidget: new DropdownWidget(this.loadDefaultFormIdDropdownList),
      processVariableList: [],
      formRules: {
        processDefinitionKey: [
          { required: true, message: '流程标识不能为空！', trigger: 'blur' },
          { type: 'string', pattern: /^[A-Za-z0-9]+$/, message: '流程标识只允许输入字母和数字', trigger: 'blur' },
          { type: 'string', pattern: /^[A-Za-z][A-Za-z0-9]+$/, message: '流程标识不能以数字开头', trigger: 'blur' }
        ],
        thumbIcon: [
          { required: true, message: '流程缩略图不能为空！', trigger: 'blur' }
        ],
        processDefinitionName: [
          { required: true, message: '流程名称不能为空！', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '流程分类不能为空！', trigger: 'blur' }
        ],
        pageId: [
          { required: true, message: '流程页面不能为空！', trigger: 'blur' }
        ],
        defaultFormId: [
          { required: true, message: '默认在线表单不能为空！', trigger: 'blur' }
        ],
        defaultRouterName: [
          { required: true, message: '默认路由表单不能为空！', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isEdit() {
      return this.flowEntry != null || this.formFlowEntryData.entryId != null
    }
  },
  watch: {
  },
  mounted() {
    // 初始化页面数据
    this.categoryIdWidget.onVisibleChange(true)
    this.pageIdWidget.onVisibleChange(true)
    if (this.isEdit) {
      this.initFlowEntryInfo()
    }
  },
  methods: {
    selectIconDialog() {

    },
    onClose() {
      this.$emit('close')
    },
    onCancel(isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess)
      }
    },
    // 流程绑定表单类型改变
    onBindFormTypeChange() {
      this.formFlowEntryData.pageId = undefined
      this.formFlowEntryData.defaultFormId = undefined
      this.formFlowEntryData.defaultRouterName = undefined
      this.entryDatasource = undefined
    },
    // 流程绑定表单页面改变
    onEntryPageChange() {
      this.formFlowEntryData.defaultFormId = undefined
      this.defaultFormIdWidget.dirty = true
      this.entryDatasource = null
    },
    // 获取流程分类
    loadCategoryIdDropdownList() {
      return new Promise((resolve, reject) => {
        FlowDictionaryController.dictFlowCategory({}).then(res => {
          resolve(res.getList())
        }).catch(e => {
          reject(e)
        })
      })
    },
    // 获取在线表单列表
    loadPageIdDropdownList() {
      return new Promise((resolve, reject) => {
        OnlinePageController.list({
          onlinePageDtoFilter: {
            pageType: this.SysOnlinePageType.FLOW
          }
        }).then(res => {
          resolve(res.data.dataList.filter(item => item.published))
        }).catch(e => {
          reject(e)
        })
      })
    },
    // 获取默认表单页面列表
    loadDefaultFormIdDropdownList() {
      return new Promise((resolve, reject) => {
        if (this.formFlowEntryData.pageId == null || this.formFlowEntryData.pageId === '') {
          resolve([])
          return
        }
        OnlineFormController.list({
          onlineFormDtoFilter: {
            pageId: this.formFlowEntryData.pageId
          },
          orderParam: [
            {
              fieldName: 'createTime',
              asc: true
            }
          ]
        }).then(res => {
          resolve(res.data.dataList)
        }).catch(e => {
          reject(e)
        })
      })
    },

    // 初始化流程基础信息
    initFlowEntryInfo() {
      this.formFlowEntryData = {
        processDefinitionName: undefined,
        processDefinitionKey: undefined,
        categoryId: undefined,
        bindFormType: this.SysFlowEntryBindFormType.ONLINE_FORM,
        pageId: undefined,
        defaultFormId: undefined,
        defaultRouterName: undefined,
        thumbIcon: 'el-icon-cpu',
        bpmnXml: undefined,
        description: undefined
      }

      FlowEntryController.view({
        entryId: this.flowEntry.entryId
      }).then(res => {
        this.formFlowEntryData = {
          ...this.formFlowEntryData,
          ...res.data
        }
        if (this.formFlowEntryData.bindFormType === this.SysFlowEntryBindFormType.ONLINE_FORM) {
          this.defaultFormIdWidget.onVisibleChange(true)
        }
      }).catch(e => {})
    },
    // 保存流程基础信息
    saveFlowEntryInfo(step) {
      const params = {
        flowEntryDto: {
          ...this.formFlowEntryData,
          step
        }
      }
      return this.isEdit ? FlowEntryController.update(params) : FlowEntryController.add(params)
    },
    onSaveFlowEntry(xml) {
      this.formFlowEntryData.bpmnXml = xml
      this.onSaveFlowEntryBasicInfo().then(res => {
        this.$message.success('保存成功')
      }).catch(e => {})
    },
    onSaveFlowEntryBasicInfo() {
      this.saveFlowEntryInfo(this.SysFlowEntryStep.DATASOURCE).then(res => {
        this.$message.success('保存成功')
      }).catch(e => {})
    }
  }
}
</script>

<style  lang="scss">
  .form-flow-basic-fragment {
    display: flex;
    flex-direction: column;
    margin: 10px 10px 20px 10px;
    .blueLink {
      color: #409eff;
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
    .btnList {
      margin-top:20px;
      display: flex;
      justify-content: right;
      float: right;
      .submitBtn {
        margin-right: 30px;
      }
    }
    .fromFlex {
      height: 36px;
      display: flex;
      align-items: center;
    }
    .base-info {
      display: flex;
      margin-bottom: 20px;
      .basics-info {
        width: 100%;
      }
    }
    .avatar-info {
      width: 40px;
      height: 40px;
      line-height: 40px;
      background: #409eff;
    }
  }
</style>
